<template>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0">
        <el-image :src="logo" style="width: 80px;height: 80px;margin-left: 40px;" fit="fill" ></el-image>
        <span class="logo">梵客禅舍</span>
      </el-menu-item>
      <div class="flex-grow" />
      <el-sub-menu index="1">           
          <template #title>{{ store.user.username }} <el-icon ><Setting /></el-icon> </template>
          <el-menu-item index="1-1">修改密码</el-menu-item>
          <el-menu-item index="1-2">退出登录</el-menu-item>  
      </el-sub-menu>
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import logo from "@/assets/logo.webp"
  import { useStore } from '@/stores'
  import { useRouter } from 'vue-router'
  const store = useStore()
  const router=useRouter()

  const handleSelect = (key: string, keyPath: string[]) => {
    if(key==='1-1'){
      
    }else{
      store.setUser({})
      store.clearCart()
      store.clearToken()
      router.push('/login')
    }
  }
  </script>
  
  <style scoped>
  .logo{
    color: rgb(253,95,32);
    font-weight: 400;
    font-size: 24px;
    padding-left: 50px;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .el-menu{
    height: 80px;

  }

  </style>
  